<template>
  <span style="color: #1e89ff; cursor: pointer" @click="openDetail">{{
    props.record.sysOrderNo
  }}</span>
  <detail
    v-if="detailVisible"
    :row="props.record"
    @close-drawer="closeDrawer"
  ></detail>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import detail from '@/views/purchase-order/purchase-order-preparation/detail/index.vue';

  const props = defineProps({
    // 渲染的index
    rowIndex: {
      type: Number,
      default: -1,
    },
    // 渲染的key
    renderKey: {
      type: String,
      default: '',
    },
    // 当前行数据
    record: {
      type: Object,
      default: () => ({}),
    },
  });
  const detailVisible = ref(false);
  const openDetail = () => {
    console.log(props.record);
    detailVisible.value = true;
  };
  const closeDrawer = () => {
    detailVisible.value = false;
  };
  const nowVal = ref(props.rowIndex);
  watch(
    () => props.rowIndex,
    (newVal) => {
      nowVal.value = newVal;
    }
  );
</script>

<style scoped lang="less">
  .color-red {
    color: green;
  }
</style>
